<template>
    <view>
        <view class="inquiry-title">轻微火灾登记书 </view>
        <table border="1" cellspacing="0" cellpadding="0" class="table_content">
            <tr>
                <th colspan="4">起火时间</th>
                <td colspan="16">
                    <view class="td-wrap">
                        <uni-datetime-picker class='datetime-picker-sepcil' type="datetime" return-type="string"
                            v-model="formData.fireTime" placeholder="请选择" />
                    </view>
                </td>
            </tr>
            <tr>
                <th colspan="4">起火地址</th>
                <td colspan="16">
                    <view class="td-wrap">
                        <span v-if="vuex_config.isConnected" style="width: 100%; text-align: left;" class="map-input"
                            :class="{ 'has-value': formData.address }" @click="openMapPopup">
                            {{ formData.address || '请选择' }}
                        </span>
                        <uni-easyinput v-else type="text" v-model="formData.address" placeholder="请输入起火地址" />
                    </view>
                </td>
            </tr>
            <tr>
                <th colspan="4">起火单位</th>
                <td colspan="16">
                    <input v-model="formData.fireCompany" placeholder="请输入..." />
                </td>
            </tr>
            <tr>
                <th colspan="4">联系人</th>
                <td colspan="6">
                    <input v-model="formData.contactor" placeholder="请输入..." />
                </td>
                <th colspan="4">联系电话</th>
                <td colspan="6">
                    <input type="number" v-model="formData.contactorPhone" placeholder="请输入..." />
                </td>
            </tr>
            <tr>
                <th colspan="4">场所类型</th>
                <td colspan="6">
                    <input v-model="formData.siteType" placeholder="请输入..." />
                </td>
                <th colspan="4">起火物</th>
                <td colspan="6">
                    <input v-model="formData.fireItem" placeholder="请输入..." />
                </td>
            </tr>
            <tr>
                <th colspan="4">过火面积</th>
                <td colspan="6">
                    <input v-model="formData.burnedArea" placeholder="请输入..." />
                </td>
                <th colspan="4">直接经济损失</th>
                <td colspan="6">
                    <input v-model="formData.economicLoss" placeholder="请输入..." />
                </td>
            </tr>
            <tr>
                <th colspan="4">保险情况</th>
                <td colspan="16">
                    <input v-model="formData.insurance" placeholder="请输入..." />
                </td>
            </tr>
            <tr style="height: 210px">
                <th colspan="4">当事人签名</th>
                <td colspan="16">
                    <view class="preparer">
                        <view>本人对火灾事故事实无异议，不需要消防救援机构出具火灾事故认定结论。</view>
                        <view flex="cross:center" style="text-indent: 4em;">
                            <span>当事人签名：</span>
                            <view flex="cross:center" style="padding:5px;">
                                <!-- <view><img v-if="formData.preparer" :src="formData.preparer" alt="" /></view> -->
                                <image class='sign-img' v-if="formData.preparer" :src="formData.preparer" alt="" />
                                <text
                                    style="color: rgb(153, 153, 153);cursor: pointer;text-decoration: underline;font-size: 14px;"
                                    @click="startSign('formData', 'preparer')">签名</text>
                            </view>
                        </view>
                        <view>时间：{{ parseTime(formData.signTime) }}</view>
                    </view>
                </td>
            </tr>
            <tr>
                <th colspan="4">统计人签名</th>
                <td colspan="6">
                    <view flex="cross:center main:justify" style="padding:5px;">
                        <view>
                            <image class='sign-img' v-if="formData.statisticstor" :src="formData.statisticstor" alt="" />
                        </view>
                        <text style="color: rgb(153, 153, 153);cursor: pointer;text-decoration: underline;font-size: 14px;"
                            @click="startSign('formData', 'statisticstor')">签名</text>
                    </view>
                </td>
                <th colspan="4">统计时间</th>
                <td colspan="6">
                    <view class="td-wrap">
                        <span style="width: 100%; text-align: left;"
                            :style="{ color: formData.statisticsTime ? '' : '#c0c4cc' }">{{ formData.statisticsTime || '请选择'
                            }}</span>
                        <uni-datetime-picker class="td-hide" v-model="formData.statisticsTime" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right"
                            :picker-options="pickerOptions">
                        </uni-datetime-picker>
                    </view>
                </td>
            </tr>
            <tr>
                <th colspan="4">备注</th>
                <td colspan="16">
                    <input v-model="formData.remark" placeholder="请输入..." />
                </td>
            </tr>
        </table>
    </view>
</template>

<script>
const pickerOptions = {
    shortcuts: [
        {
            text: "今天",
            onClick(picker) {
                picker.$emit("pick", new Date());
            }
        },
        {
            text: "昨天",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
            }
        },
        {
            text: "一周前",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
            }
        }
    ]
};

export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            pickerOptions
        }
    },
    computed: {
        formData: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('change', val)
            }
        }
    },
    methods: {
        openMapPopup() {
            uni.chooseLocation({
                success: res1 => {
                    console.log('res1：' + JSON.stringify(res1));
                    let res = JSON.parse(JSON.stringify(res1))
                    console.log('res: ', res)
                    // console.log('位置名称：' + res.name);
                    // console.log('详细地址：' + res.address);
                    // console.log('纬度：' + res.latitude);
                    // console.log('经度：' + res.longitude);
                    // this.formData.address = `${res.longitude},${res.latitude},${res.name}`
                    this.$set(this.formData, 'fireAddress', `${res.longitude},${res.latitude},${res.name}`)
                    this.$set(this.formData, 'address_pc', `${res.longitude},${res.latitude},${res.name}`)
                    this.$set(this.formData, 'address', res.name)
                },
                fail: err => {
                    console.log('err: ', err)
                }
            });
        },
        async startSign(obj, val) {
            uni.navigateTo({
                url: val ? '../components/signComponent?obj=' + obj + '&sign=' + val : '../components/signComponent'
            })
        },
    }
}
</script>
<style scoped lang="scss">
.inquiry-title {
    text-align: center;
    font-weight: bold;
    font-size: 50rpx;
}

.sign-img {
    width: 80px;
    height: 35px;
}

.table_content {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    vertical-align: center;
    box-sizing: border-box;
    color: #606266;
    font-size: 13px;
    table-layout: fixed;
    height: 800px;
    font-size: 16px;

    th {
        padding: 6px 18px;
        font-size: 16px;
        font-weight: 400;
    }

    td {
        position: relative;

        &>input,
        &>textarea,
        &>.box {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
            border: none;
            resize: none;
            font-family: inherit;
            background-color: #ebf0ff;
        }

        .input__inner,
        .el-textarea__inner {
            border: none;
            // background-color: #f0f0f0;
        }

        input[type="date"],
        input[type="time"] {
            background-color: #ebf0ff;
        }

        .td-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 16px;

            // .el-date-editor--datetime {}

            .td-hide {
                position: absolute;
                left: 0;
                opacity: 0;
            }
        }

        .input {
            width: 100%;
            height: 100%;

            .input__inner {
                height: 100%;
                font-size: 16px;
            }
        }

        .el-textarea {
            .el-textarea__inner {
                height: 100%;
                font-size: 16px;
            }
        }
    }
}
</style>